<template>
  <view class="inner-wrapper">
    <view class="background-top">
      <view class="block-wrapper npb">
        <view class="top-top">
          <view class="top-t">
            <view class="top-title">
              {{
              site.employeeName
              ? site.employeeName
              : user.name
              ? user.name
              : weixinInfo.nickName
              ? weixinInfo.nickName
              : "--"
              }}
            </view>
            <view class="top-m" @tap="goSettingSite">
              <view class="top-name">
                {{
                site.currentSite.name ? site.currentSite.name : "游客"
                }}
              </view>
              <i class="top-renzhen2 primary_color iconfont font18">&#xe6bf;</i>
            </view>
          </view>
          <u-avatar
            class="userinfo-avatar"
            :src="
              user.avatar
                ? user.avatar
                : weixinInfo.avatarUrl
                  ? weixinInfo.avatarUrl
                  : ''
            "
          />
        </view>
      </view>
    </view>
    <view v-if="user.phone" class="userinfo-itemlist2">
      <view class="item-rightLine">
        <view class="userinfo-item" v-if="settings.id!=='csxr'" @tap="goMyShangjin">
          <view class="item-left">
            <img src="../static/shangjin.png" class="shangjin" alt />
            <span>我的赏金</span>
          </view>
          <view class="item-right">
            <img src="../static/shang.png" class="shangjinLogo" alt />
            <text class="shangjinText1">{{moneyCount}}</text>
            <i class="iconfont primary_color font18">&#xe6bc;</i>
          </view>
        </view>
      </view>
    </view>

    <view v-if="user.phone" class="userinfo-itemlist2">
      <view class="item-rightLine">
        <view class="userinfo-item" v-if="settings.id!=='csxr'" @tap="myRecommended">
          <view class="item-left">
            <img src="../static/dianzan.png" class="shangjin" alt />
            <span>我的推荐</span>
          </view>
          <view class="item-right">
            <i class="iconfont primary_color font18">&#xe6bc;</i>
          </view>
        </view>
      </view>
    </view>
    <view v-if="user.phone && site.wgkInfo" class="userinfo-itemlist2">
      <view class="item-rightLine">
        <view class="userinfo-item" :disabled="wgk_disabled" @tap="goWgk">
          <view class="item-left">
            <img src="../static/wgk.png" class="shangjin" alt />
            <span>微工卡</span>
          </view>
          <view class="item-right">
            <span>{{ site.wgk_verified ? "已" : "未" }}绑定&nbsp;</span>
            <i class="iconfont primary_color font18">&#xe6bc;</i>
          </view>
        </view>
      </view>
    </view>
    <view v-if="user.phone" class="userinfo-itemlist2">
      <view class="item-rightLine">
        <view class="userinfo-item" @tap="goAuthentication">
          <view class="item-left">
            <i class="iconfont primary_color font18">&#xe6c0;</i>
            <span>实名认证</span>
          </view>
          <view class="item-right">
            <span>{{ site.verified ? "已" : "未" }}认证&nbsp;</span>
            <i class="iconfont primary_color font18">&#xe6bc;</i>
          </view>
        </view>
      </view>
    </view>
    <view class="userinfo-itemlist2">
      <view class="item-rightLine">
        <view class="userinfo-item" @tap="goAbout">
          <view class="item-left">
            <i class="iconfont primary_color font18">&#xe6be;</i>
            <span>关于我们</span>
          </view>
          <view class="item-right">
            <i class="iconfont primary_color font18">&#xe6bc;</i>
          </view>
        </view>
      </view>
    </view>
    <view class="userinfo-itemlist2">
      <view class="item-rightLine">
        <view class="userinfo-item" @tap="goHelp">
          <view class="item-left">
            <i class="iconfont primary_color font18">&#xe6c2;</i>
            <span>使用帮助</span>
          </view>
          <view class="item-right">
            <i class="iconfont primary_color font18">&#xe6bc;</i>
          </view>
        </view>
      </view>
    </view>
    <view class="userinfo-itemlist2">
      <view class="item-rightLine">
        <view class="userinfo-item" @tap="doClear">
          <view class="item-left">
            <i class="iconfont primary_color font18">&#xe62b;</i>
            <span>清除缓存</span>
          </view>
          <view class="item-right">
            <i class="iconfont primary_color font18">&#xe6bc;</i>
          </view>
        </view>
      </view>
    </view>
    <view v-if="user && user.userId" class="userinfo-itemlist2">
      <view class="item-rightLine">
        <view class="userinfo-item" @tap="changePhone">
          <view class="item-left">
            <i class="iconfont primary_color font18">&#xe6c4;</i>
            <span>更换绑定手机号</span>
          </view>
          <view class="item-right">
            <i class="iconfont primary_color font18">&#xe6bc;</i>
          </view>
        </view>
      </view>
    </view>
    <view v-if="user && user.userId" class="userinfo-itemlist2">
      <view style="margin-right:16px">
        <view class="userinfo-item" @tap="logOut">
          <view class="item-left">
            <i class="iconfont primary_color font18">&#xe6c3;</i>
            <span>退出登录</span>
          </view>
          <view class="item-right">
            <i class="iconfont primary_color font18">&#xe6bc;</i>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="userinfo-itemlist2">
      <view style="margin-right:16px">
        <view class="userinfo-item" @tap="logIn">
          <view class="item-left">
            <i class="iconfont primary_color font18">&#xe6b8;</i>
            <span>登录</span>
          </view>
          <view class="item-right">
            <i class="iconfont primary_color font18">&#xe6bc;</i>
          </view>
        </view>
      </view>
    </view>
    <view class="ta-center fh50" style="height:50px">{{ info || '' }}</view>
  </view>
</template>
<script>
import request from "@/utils/request";
import { BASE_URL } from "@/settings";
import { mapState } from "vuex";
import { buildAuthTokenReq } from "./wgk_api";
export default {
  name: "MineTab",
  props: {},
  data() {
    return {
      myBounty: {},
      moneyCount: 0,
      weixinInfo: {},
      wgk_disabled: false,
      info: null
    };
  },
  computed: {
    ...mapState(["user", "site", "settings"]),
    companyId() {
      return this.site ? this.site.companyId : null;
    },
    wgkInfo() {
      return this.site.wgkInfo;
    }
  },
  created() {
    uni.getUserInfo({
      provider: "weixin",
      success: res => {
        this.weixinInfo = res.userInfo;
        if(this.settings.id!=='csxr'){
          this.selectMyBountyVO();
        }
      },
      fail: err => {
        console.log("debug log --> ", err);
      }
    });
  },
  mounted() {
    const accountInfo = wx.getAccountInfoSync();
    this.info = accountInfo.miniProgram.version;
  },
  methods: {
    doClear() {
      uni.clearStorageSync()
      uni.showToast({
        title: "缓存已清，请重新进入小程序",
        icon: "none",
        duration: 2000
      });
    },
    selectMyBountyVO() {
      const data = {
        sourceId: this.$store.state.user.empId,
        sourceType: "emp"
      };
      request({
        url: `${BASE_URL}/recruit2/api/v1/deliverRecords/selectMyBountyVO`,
        method: "get",
        data
      }).then(res => {
        this.moneyCount = res.moneyCount;
        this.myBounty = JSON.stringify(res);
        console.log(res);
      });
    },
    myRecommended() {
      uni.navigateTo({
        url: "/myBounty/mine/recommended/recommended"
      });
    },
    goSettingSite() {
      if (this.onlyEmployee) {
        uni.showToast({
          title: "您暂未开通员⼯端，请先前往公众号进⾏绑定并开通",
          icon: "none",
          duration: 2000
        });
        return;
      }
      uni.navigateTo({
        url: "/pages/setting/site"
      });
    },
    logOut() {
      uni.clearStorageSync();
      this.$store.commit("site/clearSiteInfo");
      this.$store.commit("user/clearUserInfo");
      this.$store.commit("register/clearRegister");
      uni.reLaunch({
        url: "/pages/index/index"
      });
    },
    logIn() {
      uni.navigateTo({
        url: "/authorize/index"
      });
    },
    goMyShangjin() {
      uni.navigateTo({
        url: `/myBounty/mine/myBounty/myBounty?myBounty=${this.myBounty}`
      });
    },
    goHelp() {
      uni.navigateTo({
        url: "/authorize/goHelp"
      });
    },
    goAbout() {
      uni.navigateTo({
        url: "/authorize/about"
      });
    },
    goWgk() {
      this.wgk_disabled = true;
      if (this.site.wgk_verified) {
        this.JumpToWGK();
      } else {
        this.buildToken();
      }
    },
    goAuthentication() {
      uni.navigateTo({
        url: "/authorize/realname"
      });
    },
    goEmployeeInfo() {
      uni.navigateTo({
        url: "/pages/employee/index"
      });
    },
    goSetting() {
      uni.navigateTo({
        url: "/pages/setting/index"
      });
    },
    changePhone() {
      uni.navigateTo({
        url: "/pages/setting/phone"
      });
    },
    async JumpToWGK() {
      uni.setStorageSync('wgkJumpFromMine', '查看 start')
      wx.navigateToMiniProgram({
        appId: "wxd24d9057cd83d47a",
        path: `/pages/card/card?appid=${this.wgkInfo.spAppId}&mchid=${this.wgkInfo.mchid}&sub_mchid=${this.wgkInfo.sub_mchid}&openid=${this.wgkInfo.openid}`,
        success: (aRes) => {
          console.log('微工卡查看跳转成功', aRes);
          uni.setStorageSync('wgkJumpFromMine', '查看 success')
          this.wgk_disabled = false;
        },
        fail: (err) => {
          console.log('微工卡查看跳转失败', err);
          uni.setStorageSync('wgkJumpFromMine', '查看 fail')
          uni.showToast({
            title: '绑定失败',
            duration: 2000
          });
          this.wgk_disabled = false;
        }
      })
    },
    buildToken() {
      if (!this.site.idCard || !this.site.idName) {
        uni.showToast({
          title: '绑定前请先补全姓名身份证号',
          duration: 2000
        })
        this.wgk_disabled = false;
        return
      }
      buildAuthTokenReq(this.site.id, {
        openid: this.wgkInfo.openid,
        user_name: this.site.idName,
        id_card_number: this.site.idCard
      })
      .then(res => {
        this.wgk_disabled = false;
        console.log('微工卡绑定参数', res);
        uni.setStorageSync('wgkJumpFromMine', '绑定 start')
        uni.showModal({
          title: '跳转提示',
          content: '绑定动作需要跳转到微信官方的微工卡小程序中完成，职薪人无法获取您的任何账户信息，请放心！',
          showCancel: false,
          confirmText: '前去绑定',
          success: () => {
            wx.navigateToMiniProgram({
              appId: "wxd24d9057cd83d47a",
              path: `/pages/card/auth?appid=${res.appid}&mchid=${res.mchid}&sub_mchid=${res.sub_mchid}&openid=${res.openid}&token=${res.token}`,
              success: (aRes) => {
                console.log('微工卡绑定跳转成功', aRes);
                uni.setStorageSync('wgkJumpFromMine', '绑定 success')
              },
              fail: (err) => {
                console.log('微工卡绑定跳转失败', err);
                uni.setStorageSync('wgkJump', '绑定 fail')
                uni.showToast({
                  title: '绑定失败',
                  duration: 2000
                });
              }
            })
          }
        })
      })
      .catch(err => {
        this.wgk_disabled = false;
        console.log(err);
      })
    }
  }
};
</script>
<style lang="scss">
.userinfo-itemlist2 {
  width: 100%;
  height: auto;
  background-color: $white;
  padding-left: 16px;
  // box-sizing: border-box;
  // margin-top: 0.5px;
  // border-bottom: 0.5px solid #efeced;
  .item-rightLine {
    margin-right: 16px;
    border-bottom: 0.5px solid #efeced;
  }
  .userinfo-form-item {
    padding-top: 10px;

    &:nth-last-of-type(1) {
      .userinfo-form-item-input-wrapper {
        border: none;
      }
    }

    .userinfo-form-item-label {
      font-size: 13px;
      color: #555;
      margin-bottom: 5px;
    }

    .userinfo-form-item-input-wrapper {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #efeced;
      padding-bottom: 10px;

      .userinfo-form-item-input {
        width: 100%;
        font-size: 14px;
        color: #333;
      }

      .userinfo-form-item-input-placeholder {
        color: #9d9d9d;
        font-size: 14px;
      }

      .userinfo-form-item-arrow {
        padding-right: 16px;
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 12px;
        color: $fc1;

        img {
          width: 20px;
          height: 20px;
        }
      }
    }
  }

  .userinfo-item:nth-last-of-type(1) {
    border: none;
  }

  .userinfo-item {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #efeced;

    .item-left {
      display: flex;
      align-items: center;

      &.without-img {
        span {
          padding-left: 0;

          &.required {
            position: relative;

            &:before {
              content: "*";
              position: absolute;
              left: -8px;
              color: $red;
            }
          }
        }
      }

      img {
        width: 28px;
        height: 28px;
      }
      .shangjin {
        width: 20px;
        height: 20px;
      }
      .shangjinLogo {
        width: 16px;
        height: 16px;
      }

      span {
        font-size: 15px;
        font-weight: 400;
        color: rgba(37, 37, 37, 1);
        line-height: 21px;
        padding-left: 16px;
      }
    }

    .item-right {
      // padding-right: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 12px;
      color: $fc1;

      span {
        color: #c0c0c0;

        &.error {
          color: $red;
        }
      }

      img {
        margin-left: 5px;
        width: 20px;
        height: 20px;
      }
    }
  }
}
.top-top {
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 16px;
  padding-right: 16px;
  height: auto;
  background: #ffffff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  justify-content: space-between;
  .top-t {
    width: 70%;
  }
}
.top-top-hangye {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 12px;
  padding-right: 12px;
  height: 80px;
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  justify-content: space-between;
}
.hangye-m {
  height: 100%;
  width: 100%;
  flex-direction: column;
  display: flex;
  margin-right: 13px;
  justify-content: space-between;
}

.top-head {
  height: 60px;
  width: 60px;
}

.top-title {
  margin-bottom: 6px;

  font-size: 18px;
  color: #484848;
}
.hangye-title {
  margin-bottom: 7px;
  font-size: 16px;
  color: #222426;
}
.top-m {
  display: flex;
  margin-bottom: 18px;
  align-items: center;
}
.top-m2 {
  display: flex;
  margin-bottom: 3px;
  align-items: center;
}

.top-name {
  font-size: 14px;
  color: #595959;
}
.top-renz {
  font-size: 12px;
  color: #ffa600;
}
.top-xinxi {
  font-size: 12px;
  color: $uni-color-primary;
}
.top-hangye {
  font-size: 12px;
  color: #9c9c9c;
}
.top-renzhen {
  height: 16px;
  width: 16px;
}
.top-renzhen2 {
  height: 18px;
  width: 18px;
  margin-left: 7px;
}
.userinfo-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.background-top {
  padding-top: 12px;
  width: 100%;
  border-bottom-right-radius: 70px;
  border-bottom-left-radius: 70px;
  background-color: $uni-color-primary;
}
.shangjinText1 {
  font-size: 14px;
  font-weight: 500;
  color: #ffa600;
  margin: 0 16px 0 5px;
  display: inline-block;
}
</style>
